<template>
  <div class="container">
    <div class="login-title">
      <!-- <h2>欢迎登陆咨询平台</h2> -->
    </div>
    <div class="login-form">
      <div class="face">
        <img src="../assets/logoIn.jpg" />
      </div>
      <el-form class="login-content" label-width="100px" label-position="right">
        <el-form-item label="用户名">
          <el-input
            v-model="loginForm.username"
            placeholder="请输入用户名"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            v-model="loginForm.password"
            type="password"
            placeholder="请输入密码"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item class="form-button">
          <el-button type="primary" @click="onSubmit">登录</el-button>
          <el-button @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts">
import {
  h,
  ref,
  defineComponent,
  reactive,
  unref,
  getCurrentScope,
  getCurrentInstance,
} from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { login, getInfo } from "@/service/api";
import { loginData, user } from "@/interface/type";
import { Md5 } from "ts-md5/dist/md5";
import { setCookie } from "../utils/cookie"
export default defineComponent({
  setup() {
    console.log("setup");
    const loginForm = ref<loginData>({
      username: "",
      password: "",
    });
    const router = useRouter();
    // 重置表单
    const reset = (param?: string) => {
      console.log("reset",param);
      if (param) {
        if (param === "username") {
          loginForm.value.username = "";
        } else if (param === "password") {
          loginForm.value.password = "";
        }
      } else {
        loginForm.value.username = "";
        loginForm.value.password = "";
        console.log('clear')
      }
    };
    // 路由跳转
    function goto(item: string) {
      let nextRouter = "";
      nextRouter = nextRouter + item;
      router.push(nextRouter);
    }
    // 表单提交
    const onSubmit = async () => {
      const name = loginForm.value.username;
      let pass = loginForm.value.password;
      pass = Md5.hashStr(pass);
      if (!name) {
        ElMessage("用户名不能为空");
        reset();
      } else if (!pass) {
        ElMessage("密码不能为空");
        reset();
      } else {
        try {
          const submitMessage: loginData = {
            username: name,
            password: pass,
          };
          let role = 0;
          let userID = '';

          // 登录请求
          login(submitMessage).then((Response) => {
            const res: any = Response.data;
            console.log("data", res);
            if (res.code == -3) {
              const message = res.message;
              switch (message) {
                case "Incorrect Password":
                  ElMessage({
                    message: "密码错误",
                    type: "error",
                  });
                  reset("passward");
                  return;
                case "Username not found":
                  ElMessage({
                    message: "用户名不存在",
                    type: "error",
                  });
                  reset();
                  return;
              }
              console.log("error", message);
            } else {
              console.log("登录成功");
              ElMessage({
                message: "登录成功，欢迎",
                type: "success",
              });
              getInfo().then((Response) => {
                const res: any = Response.data;
                console.log("userData", res);
                if (res.code === -3) {
                  ElMessage("无权限");
                  return;
                } else {
                  let currentUser: user;
                  currentUser = new user(res.result);
                  let rout = "";
                  if (currentUser.role) {
                    role = currentUser.role;
                  }

                  console.log("role", role);
                  switch (role) {
                    case 0:
                      rout = "/administrator";
                      break;
                    case 1:
                      rout = "/consultant";
                      break;
                    case 2:
                      rout = "/supervisor";               
                      break;
                  }
                  userID = res.result["counsellorID"]
                  setCookie('userID', userID)
                  setCookie('auth', rout)
		              goto(rout);
                }
              });
            }
          });
        } catch (err) {
          console.log(err);
        }
      }
    };
    return {
      loginForm,
      reset,
      onSubmit,
      goto,
    };
  },
});
</script>

<style lang="less" scoped>
.container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url("../assets/preview.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .login-title {
    position: absolute;
    top: 50px;
    width: 100%;
    height: 40%;
    color: #3da827;
  }
  .login-form {
    top: 20%;
    width: 450px;
    height: 300px;
    border: 2px solid #fbfefb;
    background-color: rgb(136 188 218 / 20%);
    border-radius: 23px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .face {
      height: 150px;
      width: 150px;
      border-radius: 50%;
      border: 1px solid #eee;
      padding: 10px;
      box-shadow: 0 0 10px #ddd;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      img {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: #eee;
        border-radius: 50%;
        background-repeat: no-repeat;
        background-size: 100% auto;
      }
    }
    ::v-deep .login-content {
      padding-top: 100px;
      padding-right: 20px;
      .el-form-item__label {
        color: #fff;
      }

      .form-button {
        margin-top: 30px;
        margin-left: 56px;
      }
    }
  }
}
</style>
